<script lang="ts" setup>
import auth from '@/api/auth'
import { useAuthStore } from '@/store'
// import LoginMerchantSelect from './components/LoginMerchantSelect.vue'

const { openid, sessionid, token } = storeToRefs(useAuthStore())

const form = ref({
  phone: '',
  merchantId: '',
  code: ''
})

const second = ref(0)
const interval = ref()
async function getCode() {
  if (form.value.phone === '') {
    uni.showToast({
      icon: 'none',
      title: '请先输入手机号',
    })
  }
  else if (form.value.merchantId === '') {
    uni.showToast({
      icon: 'none',
      title: '请输入商户/门店',
    })
  }
  else {
    const { data } = await auth.forgetSendSMS(form.value.phone, form.value.merchantId)
    if (data.status === 'success') {
      second.value = 60
      interval.value = setInterval(() => {
        second.value = second.value - 1
        if (second.value <= 0) {
          second.value = 0
          clearInterval(interval.value)
        }
      }, 1000)
    }
  }
}
const loading = ref<boolean>(false)
async function confirm() {
  if (form.value.phone === '') {
    uni.showToast({
      icon: 'none',
      title: '请先输入手机号',
    })
  }
  else if (form.value.merchantId === '') {
    uni.showToast({
      icon: 'none',
      title: '请输入商户/门店',
    })
  }
  else if (form.value.code === '') {
    uni.showToast({
      icon: 'none',
      title: '请输入验证码',
    })
  }
  else {
    const { data } = await auth.forgetVerify({
      phoneNumber: form.value.phone,
      merchantId: form.value.merchantId,
      verificationCode: form.value.code
    })
    if (data.status === 'success') {
      openid.value = data?.data.openid
      sessionid.value = data?.data.sessionid
      token.value = data?.data.token
      uni.navigateTo({
        url: `/pages/login/forget-second?merchantId=${form.value.merchantId}&phone=${form.value.phone}`
      })
    }
    else {
      // 重置验证码和密码
      form.value.code = ''
    }
  }
}
function cancel() {
  uni.navigateBack()
}

</script>

<route lang="json">{
  "style": {
    "navigationBarTitleText": "忘记密码",
    "backgroundColorContent": "#ffffff"
  }
}</route>

<template>
  <div class="li-login">
    <div class="li-login-title">忘记密码</div>
    <div class="li-login-sub">请输入手机号和商户/门店号</div>
    <div>
      <nut-form :model-value="form">
        <nut-form-item>
          <nut-input v-model="form.merchantId" type="number" placeholder="请输入商户/门店号" input-class="li-login-ipt"
            placeholder-class="li-login-iptpl" />
        </nut-form-item>
        <nut-form-item>
          <nut-input v-model="form.phone" type="number" placeholder="请输入手机号" input-class="li-login-ipt"
            placeholder-class="li-login-iptpl" />
        </nut-form-item>
        <nut-form-item>
          <nut-input v-model="form.code" type="number" placeholder="请输入验证码" input-class="li-login-ipt"
            placeholder-class="li-login-iptpl">
            <template #right>
              <div class="li-login-ipt-btn" v-if="second === 0" @click="getCode">获取验证码</div>
              <div v-else class="li-login-ipt-btndis">{{ second }}</div>
            </template>
          </nut-input>
        </nut-form-item>

      </nut-form>

    </div>
  </div>
  <div class="li-login-btns">
    <nut-button type="danger" custom-class="login-btn-not shake_o" block @click="cancel">取消</nut-button>
    <nut-button type="primary" custom-class="login-btn shake_o" :loading="loading" block
      @click="confirm">确定</nut-button>
  </div>
</template>

<route lang="json">{
  "style": {
    "navigationBarTitleText": "忘记密码",
    "backgroundColorContent": "#ffffff"
  }
}</route>

<style lang="sass" scoped>
  .reset
    .top
      background-color: #fff
      text-align: center
      padding: 30px
      .title
        font-weight: bold
        font-size: 20px
        margin-bottom: 10px
      .desc
        color: #8e8e8e
        margin-bottom: 40px
      .form
        margin-top: 40px
        .space
          display: flex
          justify-content: space-around
          padding: 10px
    .button
      margin: 10px 20px

.li-login-btns
  width: 100%
  display: flex
  align-items: center
  justify-content: space-around

.li-login
  width: 600rpx
  margin-left: 75rpx

:deep(.nut-cell-group__wrap)
  border-radius: 0!important
  box-shadow: none

:deep(.nut-cell-group__wrap .nut-cell)
  height: 100rpx
  background-color: #f8f8f8
  margin-bottom: 30rpx
  border-radius: 50rpx

:deep(.nut-form-item__body)
  justify-content: center

:deep(.li-login-ipt)
  color: #333

:deep(.li-login-iptpl)
  color: #d6d6d6

.li-login-ipt-btn
  color: #2196F3

.li-login-ipt-btndis
  color: #BBDEFB

.li-login-title
  font-size: 50rpx
  margin-top: 50rpx
  margin-left: 15rpx

.li-login-sub
  font-size: 28rpx
  color: #666666
  margin-top: 20rpx
  margin-bottom: 40rpx
  margin-left: 15rpx

:deep(.login-btn)
  width: 100%
  height: 85rpx
  margin-top: 30rpx
  background-color: #2196F3!important
  width: 300rpx

:deep(.login-btn-not)
  width: 100%
  height: 85rpx
  margin-top: 30rpx
  background-color: #eb0909!important
  width: 300rpx

.login-forget
  width: 100%
  margin-top: 20rpx
  display: flex
  align-items: center
  justify-content: center
  .login-forget-text
    color: #42A5F5
    margin-left: 5rpx

  </style>
